<template>
  <el-dialog
    v-model="visible"
    title="爬虫状态详情"
    width="800px"
    :before-close="handleClose"
    class="unified-dialog spider-status-detail-dialog"
    :close-on-click-modal="false"
    append-to-body
  >
    <template #header>
      <div class="dialog-header">
        <div class="header-icon header-icon-primary">
          <el-icon><View /></el-icon>
        </div>
        <div class="header-content">
          <h3>爬虫状态详情</h3>
          <p>查看爬虫状态的详细信息</p>
        </div>
      </div>
    </template>

    <div v-if="spiderStatus" class="dialog-content">
      <el-descriptions :column="2" border size="default">
        <!-- 基本信息 -->
        <el-descriptions-item label="ID" label-class-name="detail-label">
          {{ spiderStatus.id }}
        </el-descriptions-item>
        <el-descriptions-item label="环境ID" label-class-name="detail-label">
          {{ spiderStatus.env_id }}
        </el-descriptions-item>

        <el-descriptions-item label="爬虫名称" :span="2" label-class-name="detail-label">
          <div class="detail-text">{{ spiderStatus.spider_name }}</div>
        </el-descriptions-item>

        <!-- 存活状态 -->
        <el-descriptions-item label="存活状态" label-class-name="detail-label">
          <el-tag :type="spiderStatus.is_alive === 1 ? 'success' : 'danger'" size="small">
            {{ spiderStatus.is_alive === 1 ? '存活' : '死亡' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="心跳时间" label-class-name="detail-label">
          <span v-if="spiderStatus.heartbeat_time">{{ spiderStatus.heartbeat_time }}</span>
          <span v-else class="text-muted">-</span>
        </el-descriptions-item>

        <el-descriptions-item label="心跳超时(秒)" label-class-name="detail-label">
          <span v-if="spiderStatus.heartbeat_timeout_seconds !== null && spiderStatus.heartbeat_timeout_seconds !== undefined">
            {{ spiderStatus.heartbeat_timeout_seconds }}
          </span>
          <span v-else class="text-muted">-</span>
        </el-descriptions-item>
        <el-descriptions-item label="最后检查时间" label-class-name="detail-label">
          {{ spiderStatus.last_check_time }}
        </el-descriptions-item>

        <!-- 队列信息 -->
        <el-descriptions-item label="请求队列长度" label-class-name="detail-label">
          {{ formatNumber(spiderStatus.request_queue_length || 0) }}
        </el-descriptions-item>
        <el-descriptions-item label="失败队列长度" label-class-name="detail-label">
          {{ formatNumber(spiderStatus.failed_queue_length || 0) }}
        </el-descriptions-item>

        <el-descriptions-item label="失败率(%)" :span="2" label-class-name="detail-label">
          <span :class="getFailedRateClass(spiderStatus.failed_rate)">
            {{ formatDecimal(spiderStatus.failed_rate || 0) }}%
          </span>
        </el-descriptions-item>

        <!-- 时间信息 -->
        <el-descriptions-item label="创建时间" label-class-name="detail-label">
          {{ spiderStatus.created_at }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间" label-class-name="detail-label">
          {{ spiderStatus.updated_at }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { View } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  spiderStatus: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 格式化数字
const formatNumber = (num) => {
  if (num === null || num === undefined) return '0'
  return num.toLocaleString()
}

// 格式化小数
const formatDecimal = (num) => {
  if (num === null || num === undefined) return '0.00'
  return parseFloat(num).toFixed(2)
}

// 获取失败率样式类
const getFailedRateClass = (failedRate) => {
  if (failedRate > 10) return 'failed-rate-high'
  if (failedRate > 5) return 'failed-rate-medium'
  return 'failed-rate-low'
}

const handleClose = () => {
  visible.value = false
}
</script>

<style scoped>
.spider-status-detail-dialog :deep(.el-dialog__header) {
  padding: 0;
}

.spider-status-detail-dialog :deep(.el-dialog__body) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #ebeef5;
}

.header-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.header-icon-primary {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
}

.header-content h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.header-content p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.dialog-content {
  margin-top: 20px;
}

.detail-label {
  font-weight: 600;
  color: #606266;
}

.detail-text {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  color: #303133;
  word-break: break-all;
}

.text-muted {
  color: #909399;
  font-style: italic;
}

.failed-rate-high {
  color: #f56c6c;
  font-weight: 600;
}

.failed-rate-medium {
  color: #e6a23c;
}

.failed-rate-low {
  color: #67c23a;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
</style>













